<template>
  <div id="eventdetails" class="modPage" @mouseover="showset" @mouseout="hideset" :style="{color:defaultmoddata.config.fontcolor}">
    <div class="title" v-show="defaultmoddata.config.titleshow">
      <div class="titlecon">
        <div class="title-box">{{defaultmoddata.config.title}}</div>
      </div>
    </div>
    <div class="modPagecontent clearstyle" v-html="taskdata.Summary"></div>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
    <div class="bg"></div>
  </div>
</template>

<script>
  export default {
    props: ["taskdata", "moddata", "index"],
    data: function () {
      return {
        maskshow: false
      }
    },
    computed: {
      defaultmoddata() {
        if (this.moddata) {
          return this.moddata
        } else {
          return {
            config: {
              fontcolor: "#000000",
              titleshow: true,
              title: "活动详情"
            }
          }
        }
      }
    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$emit('setmod', 'EventDetails', this.index, "BasicModule")
      },
      deletemod: function () {
        this.$emit("delreq", this.index)
      }
    }
  }
</script>

<style scoped>
  .modPage {
    position: relative;
  }

  .modPage .modPagecontent {
    padding: .444444rem;
    overflow-x: hidden;
    min-height: 2.222222rem;
  }

  img {
    max-width: 100%;
  }
</style>
<style lang="less">
  .modPage .modPagecontent img {
    max-width: 100%;
  }
  #eventdetails .summary {
    word-wrap: break-word;
    cursor: text;
    font-family: sans-serif;
    font-size: 16px;
    b,
    strong {
      font-weight: bold;
    }
    i,
    em {
      font-style: italic;
      font-weight:inherit;
    }
    p {
      margin: 5px 0;
    }
  }
</style>